<template>
  <div class="app-container">
    <div class="search-container">
      <div class="search-wrap">
        <div style="display:inline-block;">
          <label class="radio-label" style="padding-left:0;">网络名称: </label>
          <el-input v-model="fieldName" placeholder="" style="width:240px;"/>
        </div>

        <div style="display:inline-block;">
          <label class="radio-label">网段: </label>
          <el-input v-model="fieldName" placeholder="" style="width:240px;"/>
        </div>
        <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-search">
          搜索
        </el-button>
        <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="info" icon="el-icon-refresh-right">
          重置
        </el-button>
      </div>

      <div class="btn-wrap radio-label">
        <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-circle-plus-outline"
        @click="dialogTableVisible = true">
          新增
        </el-button>
      </div>
    </div>


    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
      <el-table-column align="center" label="编号" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="镜像网络">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="网络">
        <template slot-scope="scope">
          {{ scope.row.network }}
        </template>
      </el-table-column>
      <el-table-column label="真实网络名称">
        <template slot-scope="scope">
          {{ scope.row.netAttr }}
        </template>
      </el-table-column>
      <el-table-column label="真实网段地址">
        <template slot-scope="scope">
          {{ scope.row.netMask }}
        </template>
      </el-table-column>
      <el-table-column label="网络复制方式">
        <template slot-scope="scope">
          {{ scope.row.copyType }}
        </template>
      </el-table-column>
      <el-table-column label="指纹复制">
        <template slot-scope="scope">
          {{ scope.row.finger }}
        </template>
      </el-table-column>
      <el-table-column label="应用复制">
        <template slot-scope="scope">
          {{ scope.row.software }}
        </template>
      </el-table-column>
      <el-table-column label="蜜罐">
        <template slot-scope="scope">
          {{ scope.row.guise }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="110" align="center">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.status == '暂停'">{{ scope.row.status }}</el-tag>
          <el-tag type="success" v-else>{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="260" align="center">
        <template slot-scope="{row}">
          <el-button
            type="warning"
            size="mini"
            icon="el-icon-edit"
          >
            修改
          </el-button>

          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
          >
            删除
          </el-button>
        </template>
        
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>


    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="新增镜像网络" @dragDialog="handleDrag" width="1200px">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px">
        <el-row>
          <el-col :span="24">
            <div class="form-title">网络配置</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="镜像网络名称" prop="title">
              <el-input value="办公网络主机"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="镜像网络" prop="title">
              <div class="select-wrap">
                <el-input value="172.168.1.0/24"></el-input>
                <el-button class="scan-btn" type="warning" size="mini">
                  扫描网络
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="镜像属性" prop="title">
              <el-select v-model="temp.type" class="filter-item" size="medium" placeholder="请选择" clearable>
                <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="temp.type != '新建'">
          <el-col :span="24">
            <div class="form-title">镜像网络对象列表</div>
          </el-col>
        </el-row>

        <el-row v-if="temp.type != '新建'">
          <el-col :span="24">
            <el-table
              :data="scanTableData"
              style="width: 100%">
              <el-table-column
                prop="no"
                label="编号"
                width="80">
              </el-table-column>
              <el-table-column
                prop="ip"
                label="IP地址"
                width="120">
              </el-table-column>
              <el-table-column
                v-if="temp.type != '复制蜜罐'"
                prop="finger"
                label="指纹信息">
              </el-table-column>
              <el-table-column
                v-if="temp.type != '复制指纹'"
                prop="honeypot"
                label="蜜罐信息">
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogTableVisible = false">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList } from '@/api/article'
import { parseTime } from '@/utils'

import Pagination from '@/components/Pagination'
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  name: 'dynamic',
  components: { Pagination },
  directives: { elDragDialog },
  data() {
    return {
      list: null,
      fieldName: '',
      listLoading: true,
      downloadLoading: false,
      autoWidth: true,
      scanTableData: [
        {
          no: 1,
          ip: "192.168.1.100",
          finger: "Open ssl 2.1.7,Apache1.2.8",
          honeypot: "Samba蜜罐、ftp蜜罐、ssh蜜罐"
        },
        {
          no: 2,
          ip: "192.168.1.161",
          finger: "Content-Security-Policy",
          honeypot: "上网行为管理系统蜜罐"
        },
        {
          no: 3,
          ip: "192.168.1.102",
          finger: "-",
          honeypot: "mssql蜜罐"
        },
        {
          no: 4,
          ip: "192.168.1.173",
          finger: "-",
          honeypot: "jenkins蜜罐、redis蜜罐、apache蜜罐、nginx蜜罐、iis蜜罐..."
        },
        {
          no: 5,
          ip: "192.168.1.114",
          finger: "Citrix-NetScaler;BroadWin-WebAccess;DVWA;Elite-Gaming-Ladders...",
          honeypot: "-"
        },
        {
          no: 6,
          ip: "192.168.1.110",
          finger: "-",
          honeypot: "上网行为管理系统蜜罐"
        },
        {
          no: 7,
          ip: "192.168.1.117",
          finger: "HP打印机",
          honeypot: "-"
        },
        {
          no: 8,
          ip: "192.168.1.128",
          finger: "Open ssl 2.1.7,Apache1.2.8",
          honeypot: "PHP蜜罐、tomcat蜜罐"
        }
      ],

      formList: [
        {
          ip: '192.168.2.118,192.168.2.118,192.168.2.118,192.168.2.118,192.168.2.118...',
          server: 'SSH蜜罐,FTP蜜罐,MAIL蜜罐,SMB蜜罐...',
          status: '运行中'
        },
        {
          ip: '203.45.12.85,225,234.142.118,18.10.2.88...',
          server: '天融信上网行为管理系统蜜罐,天融信防火墙蜜罐,深信服WAF系统蜜罐,奇安信防火墙系统蜜罐...',
          status: '运行中'
        },
      ],
      dialogTableVisible: false,

      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published',
      },
      hostOptions: ['28.12.125.74','47.45.109.68','12.16.84.57','176.86.94.57','175.116.180.77','112.116.110.107','182.16.10.8','2.16.105.57','182.161.122.77'],
      typeOptions: ['新建','全网复制','复制指纹','复制蜜罐'],
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      let data = []
      fetchList().then(response => {
        
        data.push({
          title: "办公网络-1",
          network: "172.168.10.0/24",
          netAttr: "财务网络",
          netMask: '192.168.1.0/24',
          copyType: '全网复制',
          finger: '-',
          software: "-",
          guise: "-",
          status: "运行中"
        })
        data.push({
          title: "办公网络-2",
          network: "172.168.11.0/24",
          netAttr: "办公终端网络",
          netMask: '192.168.2.0/24',
          copyType: '自定义复制',
          finger: 'SSH、FTP',
          software: "HTTP",
          guise: "OA蜜罐",
          status: "运行中"
        })
        data.push({
          title: "数据中心",
          network: "10.10.10.0/24",
          netAttr: "管理网络",
          netMask: '10.10.1.0/24',
          copyType: '自定义复制',
          finger: 'HTTP',
          software: "HTTP",
          guise: "OA蜜罐、SSH蜜罐",
          status: "暂停"
        })
        data.push({
          title: "办公网络",
          network: "58.42.26.0/24",
          netAttr: "办公网络",
          netMask: '192.168.4.0/24',
          copyType: '全网复制',
          software: "-",
          guise: "-",
          status: "运行中"
        })

        this.list = data
        this.listLoading = false
      })
    },
    handleDrag() {
      console.log("添加页面")
    }
  }
}
</script>

<style scoped>
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: right;
}
.search-container {
  display: flex;
  justify-content: space-between;
}
.search-wrap {
  flex: 1;
}

.form-title {
  margin-bottom: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #F1F1F1;
  box-sizing: border-box;
}
.el-select {
  width: 100%;
}

.select-wrap {
  display: flex;
}
.scan-btn {
  margin-left: 10px;
}
</style>
